<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";

import type { TabsPaneContext } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import { ElFormItem, ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from "vue-router";

// 数据
import { ClassStore } from "@/stores/BackData/ClassManage/class";
import { classBasic } from "@/stores/BackData/ClassManage/classBasic";
// 组件
import ClassDetail from "@/components/back/classManage/classDetail.vue";
import ClassList from "@/components/back/classManage/ClassList.vue";
import router from "@/router";
// 请求
import { getOneClass } from "@/api/teacher/he/class";
// import { delOne } from "@/api/teacher/he/class";
import { getVideo } from "@/api/teacher/he/class";
import { myaddVideo } from "@/api/teacher/he/class";
import { addVi } from "@/api/teacher/he/class";
import { addclassExam } from "@/api/teacher/he/class";
import { delClass } from "@/api/teacher/he/class";

// 导入的数据
const store = ClassStore();
const basStore = classBasic();
const video = store.video;
const route = useRoute();
// 加载
const fullscreenLoading = ref(false);

const id = route.query.id;
// 添加视频的内容
const content = reactive<any>({
  classId: id,
  serialNumber: null,
  videoDuration: "",
  video: "",
  // "https://onlineclass2-1256902071.cos.ap-chengdu.myqcloud.com/onlineclass2/6121701769371373.mp4",
  videoName: "",
  h: null,
  m: null,
  s: null,
});

onMounted(() => {
  getOneClass(id).then((res: any) => {
    // console.log(res);

    store.getOne(res.data.data);
  });
});

// 切换按钮
const activeName = ref("first");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  if (activeName.value == "first") {
    getVideo(id).then((res: any) => {
      store.getVideo(res.data.data);
    });
  }
};
const url = ref(
  "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
);

// 添加视频
const dialogFormVisible = ref(false);
// 添加考试
const ExamForm = ref(false);
const DelClassForm = ref(false);
const up = ref(false);
const formLabelWidth = "140px";

// 编辑课程
const goEdit = () => {
  // console.log(store.oneClass[0]);
  basStore.type = "1"; //1代表编辑
  basStore.changeClass(store.oneClass[0]);
  router.push("/CreateClass");
};

// 删除课程
const deleClass = (id: any) => {
  delClass(id).then((res) => {
    if (res.data.msg == "请求成功") {
      ElMessageBox.alert("删除成功", "提示", {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: "OK",
      });
      DelClassForm.value = false;
    }
  });
};
// 星号
const ruleFormRef = ref<FormInstance>();

const checkNull = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("不能为空"));
  }
};
const rules = reactive<FormRules<typeof video>>({
  video_name: [{ validator: checkNull, trigger: "blur" }],
  // id: [{ validator: checkNull, trigger: "blur" }],
  video: [{ validator: checkNull, trigger: "blur" }],
});

// 添加视频的功能按钮
const file = reactive<any>([]);
const changeVideo = (e: any) => {
  file.push(e.target.files[0]);
};
const test = () => {
  getVideoDuration(file);
  content.video =
    "https://onlineclass2-1256902071.cos.ap-chengdu.myqcloud.com/onlineclass2/4721701771328661.mp4";
  getVideoDuration(file);
};

// 获取视频时长
const myduration = ref<any>("");
const myaudio = ref<any>("");

const getVideoDuration = (file: any) => {
  // var url: any = window.URL.createObjectURL(new Blob(file));
  // console.log(url);

  var audioElement: any = new Audio(content.video);
  // let audioElement: any = document.getElementById("test");

  audioElement.addEventListener("loadedmetadata", function () {
    // console.log(audioElement.duration);
    myduration.value = parseInt(audioElement.duration);
    let h = Math.floor(parseInt(audioElement.duration) / 3600);
    let m = Math.floor((parseInt(audioElement.duration) % 3600) / 60);
    let s = Math.floor(parseInt(audioElement.duration) % 60);
    content.h = h;
    content.m = m;
    content.s = s;
    content.videoDuration = h + ":" + m + ":" + s;
    console.log(content);
    // 添加视频
    addVi(content).then((res) => {
      // console.log(res);
      fullscreenLoading.value = false;
      ElMessageBox.alert("视频添加成功", "提示", {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: "OK",
      });
      dialogFormVisible.value = false;
    });
  });
};

// test
// const test = () => {
//   const test = reactive<any>({
//     classId: 1,
//     id: 0,
//     serialNumber: 2,
//     videoDuration: "02:10:45",
//     video:
//       "https://onlineclass2-1256902071.cos.ap-chengdu.myqcloud.com/onlineclass2/6121701769371373.mp4",
//     videoName: "这是一次测试",
//   });
//   addVi(test).then((res) => {
//     console.log(res);
//   });
// };
const addVideo = () => {
  fullscreenLoading.value = true;
  let fd = new FormData();
  fd.append("video", file[0]);
  console.log(fd);

  if (
    content.videoDuration != null &&
    content.serialNumber != null &&
    content.classId != null
  ) {
    myaddVideo(fd)
      .then((res) => {
        console.log("上传成功");
        myaudio.value = res.data.data;
        content.video = res.data.data;

        getVideoDuration(file);
        // console.log(content);
      })
      .catch((err) => {
        ElMessageBox.alert("视频上传失败，请重新尝试", "提示", {
          // if you want to disable its autofocus
          // autofocus: false,
          confirmButtonText: "OK",
        });
        fullscreenLoading.value = false;
      });
  }
};

// 添加考试
const addExam = reactive({
  paper_id: "",
  name: "",
});
const addEaxmSuess = () => {
  addclassExam(addExam).then((res) => {
    console.log(res);

    if (res.data.msg == "添加成功!") {
      ElMessageBox.alert("考试添加成功", "提示", {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: "OK",
      });
      ExamForm.value = false;
    }
  });
};
</script>
<template>
  <div class="classdetail">
    <div class="top">
      <div>
        <div>课程名称:{{ store.oneClass[0].className }}</div>
        <div class="cbtn">
          <el-button @click="dialogFormVisible = true">添加视频</el-button>
          <el-button @click="goEdit">编辑课程</el-button>
          <el-button @click="ExamForm = true">添加考试</el-button>
          <el-button @click="DelClassForm = true">删除课程</el-button>
          <!-- <el-button @click="up = true">申请上架</el-button> -->
        </div>
      </div>
      <div class="classCont">
        <el-image
          style="width: 20%"
          :src="store.oneClass[0].img"
          fit="scale-down"
          align="left"
          class="img"
        />

        <div class="text">
          <div id="bb">
            <div>所属合集：{{ store.oneClass[0].thematicId }}</div>
            <div>课程价格:{{ store.oneClass[0].price }}￥</div>
          </div>
        </div>
        <div class="roundbox">
          <template v-if="store.oneClass[0].isShelves == 1">
            <div class="round green"></div>
            <span>已上架</span>
          </template>
          <template v-if="store.oneClass[0].isShelves == 0">
            <div class="round orange"></div>
            <span>待上架</span>
          </template>
        </div>
      </div>
      <div class="tag">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="课程详情" name="first">
            <ClassDetail></ClassDetail>
          </el-tab-pane>
          <el-tab-pane label="课程目录" name="second">
            <ClassList></ClassList>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>

  <!-- 添加视频弹框 -->
  <el-dialog
    v-model="dialogFormVisible"
    title="添加视频"
    :model="video"
    label-width="120px"
  >
    <!-- <button @click="test">XXX</button> -->
    <button @click="test">XXX</button>
    <el-form :model="video">
      <el-form-item
        label="视频名称"
        :label-width="formLabelWidth"
        prop="video_name"
        :rules="rules"
        ref="ruleFormRef"
      >
        <el-input
          v-model="content.videoName"
          autocomplete="off"
          placeholder="请输入视频名称"
        />
      </el-form-item>
      <el-form-item label="序号" :label-width="formLabelWidth" prop="id">
        <el-select v-model="content.serialNumber" placeholder="请选择排序序号">
          <el-option label="01" value="1" />
          <el-option label="02" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="上传视频" :label-width="formLabelWidth">
        <!-- <el-button type="primary" @click="uploadVideo">点击上传</el-button> -->
        <input type="file" name="" id="" @change="changeVideo" />
      </el-form-item>
    </el-form>
    <el-form-item :label-width="formLabelWidth" required prop="video_duration">
      {{ content.video }}
      <!-- <audio ref="audio" class="aud" id="test">
        <source :src="content.video" /> -->
      <!-- <source
          src="https://onlineclass2-1256902071.cos.ap-chengdu.myqcloud.com/onlineclass2/6121701769371373.mp4"
        /> -->
      <!-- </audio> -->
      <!-- <el-input v-model="content.videoDuration" autocomplete="off" disabled /> -->
    </el-form-item>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="addVideo"
          v-loading.fullscreen.lock="fullscreenLoading"
        >
          添加
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 添加考试 -->
  <el-dialog v-model="ExamForm" title="添加考试">
    <el-form :model="addExam">
      <el-form-item label="考试名称" :label-width="formLabelWidth" required>
        <el-input
          v-model="addExam.name"
          autocomplete="off"
          placeholder="请输入考试名称"
        />
      </el-form-item>
      <!-- <el-form-item label="序号" :label-width="formLabelWidth" required>
        <el-input
          v-model="addExam.paper_id"
          autocomplete="off"
          placeholder="请输入视频名称"
        />
      </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="ExamForm = false">取消</el-button>
        <el-button type="primary" @click="addEaxmSuess"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 删除课程 -->
  <el-dialog v-model="DelClassForm" title="删除课程" width="30%">
    <P>是否确定删除该课程？</P>
    <P>删除此课程将无法恢复</P>
    <hr />

    <span class="dialog-footer">
      <el-button @click="DelClassForm = false">取消</el-button>
      <el-button type="primary" @click="deleClass(id)"> 确认 </el-button>
    </span>
  </el-dialog>

  <!--申请上架  -->
  <el-dialog v-model="up" title="删除课程" width="30%">
    <P>是否确定申请上架？</P>

    <hr />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="up = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style scoped>
.classdetail {
  width: 100%;
  height: 900px;
  margin-top: 20px;
  background-color: #f5f7fa;
}
.classdetail .top {
  width: 100%;

  background-color: white;
  height: 300px;
}

.classdetail .top > div:first-child {
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.classdetail .top .cbtn {
  width: 60%;
}
.classCont {
  width: 80%;
  height: 200px;
  display: flex;
  margin: auto;
  justify-content: space-around;
}
.classCont > div:nth-child(2) {
  width: 50%;
}
.classCont > div {
  width: 30%;
}
.round {
  width: 15px !important;
  height: 15px;
  border-radius: 15px;
}
.green {
  background-color: green;
}
.orange {
  background-color: orange;
}
.text {
  display: flex;
  align-items: center;
  margin: 0;
  padding-left: 20px;
}
#bb > div {
  margin: 10px 0;
}

.roundbox {
  display: flex;
  align-items: center;
  justify-content: end;
  padding-right: 50px;
}

/* 下方 */

.tag {
  width: 80%;
  margin: auto;
}

/* 弹框 */
/* 添加视频弹框 */
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
